import { useModel } from "umi";
import { Modal, message, Image as AntdImage, Row, Col, Upload, Button, Descriptions, Form, Input, Radio, Select, DatePicker, Space } from "antd";
import { SaveOutlined, DeleteOutlined } from "@ant-design/icons";
import { useState, useEffect } from "react";
import dayjs from "dayjs";
import { useReactive } from "ahooks";

import useAllPositions from "../../hooks/position/useAllPositions";
import useAllStaffs from "../../hooks/staff/useAllStaffs";
import useUpdateStaff from "../../hooks/staff/useUpdateStaff";
import useUpdateSystemStaff from "../../hooks/staff/useUpdateSystemStaff";

const EditSystemStaff = ({ staff, reloadData }) => {
    const [form] = Form.useForm();
    const { onCloseGlobalModal } = useModel("global.modal");

    const { loading: positionLoading, positions, loadAllPositions } = useAllPositions();
    const { loading: staffLoading, staffs, loadAllStaffs } = useAllStaffs({ osType: "正式", osStat: true });
    const { loading, updateSystemStaff } = useUpdateSystemStaff();

    const state = useReactive({
        selectDeInfo: null,
    });

    let onFinish = async (values) => {
        values.osUuid = staff.osUuid;
        values.deInfo = state.selectDeInfo ? { osUuid: state.selectDeInfo.osUuid, osName: state.selectDeInfo.osName, omUuid: state.selectDeInfo.omUuid } : {};
        updateSystemStaff(values, (res) => {
            if (res) {
                message.success("成功更新员工信息");
                reloadData();
                onCloseGlobalModal();
            }
        });
    };

    return (
        <Form
            form={form}
            onFinish={onFinish}
            labelCol={{ span: 6 }}
            wrapperCol={{ span: 16 }}
            initialValues={{
                ...staff,
                deInfo: staff.deInfo?.osUuid || undefined,
            }}
            style={{ padding: "10px 0" }}
        >
            <Form.Item label="员工姓名">{staff.osName}</Form.Item>

            <Form.Item label="员工类型" name="osType" rules={[{ required: true }]}>
                <Radio.Group>
                    <Radio value="正式">正式</Radio>
                    <Radio value="兼职" disabled>
                        兼职
                    </Radio>
                    <Radio value="临时工" disabled>
                        临时工
                    </Radio>
                    <Radio value="实习生" disabled>
                        实习生
                    </Radio>
                </Radio.Group>
            </Form.Item>

            <Form.Item label="当前职位" name="opUuid">
                <Select loading={positionLoading}>
                    {positions.map(({ opUuid, opName }) => (
                        <Select.Option key={opUuid} value={opUuid}>
                            {opName}
                        </Select.Option>
                    ))}
                </Select>
            </Form.Item>

            <Form.Item label="直属上级" name="deInfo">
                <Select loading={staffLoading} onSelect={(value) => (state.selectDeInfo = staffs.find((item) => item.osUuid === value))}>
                    {staffs.map(({ osUuid, osName }) => (
                        <Select.Option key={osUuid} value={osUuid}>
                            {osName}
                        </Select.Option>
                    ))}
                </Select>
            </Form.Item>

            <div style={{ textAlign: "center" }}>
                <Space>
                    <Button loading={loading} type="primary" htmlType="submit">
                        保存
                    </Button>
                    <Button loading={loading} onClick={form.resetFields}>
                        重置
                    </Button>
                    <Button loading={loading} onClick={onCloseGlobalModal}>
                        取消
                    </Button>
                </Space>
            </div>
        </Form>
    );
};

export default EditSystemStaff;
